<template>
  <div class="content">
    <div class="sub_content">

      <!--{{this.checkbox}} && {{this.stats.name}} && {{this.stats.idCard}} && {{this.stats.sex}} && {{this.stats.phone}} && {{this.stats.verification}}-->


      <div class="label"><p>被保人姓名</p>
        <div class="input"><input type="text" v-model="name" placeholder="请输入与身份证一致的姓名" @keyup.enter="blurNname "
                                  @blur="blurNname"></div>
      </div>
      <div class="label"><p>被保人身份证号</p>
        <div class="input"><input type="text" placeholder="请输入被保人的身份证号" v-model="idCard" @keyup.enter="blurIdCard"
                                  @blur="blurIdCard"></div>
      </div>
      <div class="label"><p>被保人性别</p>
        <div class="input"><input type="select" keyup.enter="blursex" @blur="blursex" placeholder="请填写被保人性别"
                                  v-model="sex"></div>
      </div>
      <div class="label"><p>手机号</p>
        <div class="input"><input type="number" placeholder="请输入手机号（用于接受投保成功短信及电子保单）" v-model="phone"
                                  @keyup.enter="mobile" @blur="mobile"></div>
      </div>
      <div class="label"><p>验证码</p>
        <div class="input">
          <input placeholder="请输入验证码" type="number" v-model="verification" @keyup.enter="code" @blur="code">
          <div class="Verification" @click="GetVerification">{{msg.time}}{{msg.btntxt}} </div>
        </div>
      </div>
      <div class="agreement"><input type="checkbox" v-model="checkbox">
        本人已阅读<span @click="notice">《投保须知》</span>并接受 <a href="http://app.ninebot.cn/insurance/index_pay.html"><span>《法律声明》</span></a>，且承诺填写信息准确无误。
      </div>
    </div>
    <div class="submit">
      <span>￥{{this.$route.query.price}}</span>元
      <!--<button :class="" class="submit_btn" @click="submit" :disabled="disabled">立即投保</button>-->
      <button :class="" class="submit_btn" @click="submit">立即投保</button>
    </div>


    <!--投保须知-->
    <div class="notes" v-show="notesflag">
      <div class="notes_bg"></div>
      <div class="notes_con">
        <h3>投保须知</h3>
        <p>
          1、被保险人必须为车辆实际使用人（满10周岁以上）。 <br>
          2、被保险人真实姓名需要与身份证号码保持一致。理赔时需要提供被保险人身份证复印件，请确保填写的被保险人真实姓名、身份证号码与身份证信息一致，否则将无法
          进行理赔。<br>
          3、非常重要：请确保您的所有信息准确无误，保险信息一旦提交，将不可修改和补录。<br>
          4、若被保险人已就本车型投过本保险且仍在保期内，则无法重复投保。<br>
          5、保险公司将通过您填写的手机号发送有关保单号等信息，请确保手机号正确无误。
        </p>
        <div class="gotit" @click="gotit">我知道了</div>
      </div>
    </div>




    <!--性别提示-->
    <div class="sexnot" v-show="stats.sexnot">
      <div class="sexnot_bg"></div>
      <div class="sexnot_con">
        <h3>提示</h3>
        <p class="sexnot_center">
          性别与身份证信息不符，是否继续
        </p>
        <div class="sexbtn">
          <div class="cancel" @click="cancel">取消</div>
          <div class="determine" @click="determine">确定继续</div>
        </div>
      </div>
    </div>


    <div class="mesg" v-show="model.isShow">
      <div class="mesg_con">{{mesg}}</div>
      <div class="mesg_bg"></div>
    </div>

    <!--<notes></notes>-->
    <!--<div>{{mesg}}</div>-->

  </div>
</template>
<script>
  //  import notes from '../base/Notes.vue';
  import api from '../api'
  export default {
    created(){
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      if (isAndroid){
        var input  = document.getElementsByClassName('input')
        input.onclick=function(){
          var target = this;
          setTimeout(function(){
            target.scrollIntoViewIfNeeded();
          },400);
        }
      }


    },

    data(){
      return {
//        price:0,//支付价格
        name: "",
        sex: "", //手动输入性别
        sexm: "", //自动验证性别
        idCard: "",
        phone: "",
        verification: "",
        checkbox: false,
        mesg: '', //提示框
        disabled: true,//投保按钮默认不可点
        msg: {
          time: '', //时间倒计时
          btntxt: "点击发送验证码",
//          flag:false  // 验证码可点
          showTime: true
        },
        row: {
          age: ''//年龄
        },

        stats: {//状态管理
          name: false,
          sex: false,
          sexnot: false,  //性别不一致，是否提示，默认不提示  点击提交按钮时性别状态
//          stsex:'', //点击提交按钮时性别状态
          idCard: false,
          phone: false,
          verification: false,
        },

        notesflag: true,

        //弹框倒计时
        model: {
          outTime: 2000,
          isShow: false
        }

      }
    },


    methods: {
      //错误提示框
      modelMask () {
        var that = this;
        that.model.isShow = true
        window.setTimeout(
          function () {
            that.model.isShow = false
          }, this.model.outTime);
      },

      //投保须知
      gotit(){
        this.notesflag = false;
        this.statement = false;
      },

      notice(){
        this.notesflag = true;
      },




      //姓名验证
      blurNname(){
        this.mesg = ""
        var name = this.name
        var regName = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
        if (!regName.test(name)) {
          this.mesg = "姓名有误";
          this.modelMask()
          this.stats.name = false;
          return false;
        }
        this.stats.name = true;
      },

      // 身份证离开焦点验证
      blurIdCard(){
        this.IdCodeValid(this.idCard);
      },

      //身份证校验
      IdCodeValid(cardId) {
        this.mesg = ""
        var iSum = 0;
        var re = /^\d{17}(\d|X)$/i;
        if (!re.test(cardId)) {
          this.stats.idCard = false;
          this.mesg = "身份证号格式错误"
          this.modelMask()
          this.row.age = ''
          this.sexm = ''
          this.sex=""
          return false;
        }
        cardId = cardId.replace(/X$/i, "a");












        //验证出生日期是否合法
        var sBirthday = cardId.substr(6, 4) + "-" + Number(cardId.substr(10, 2)) + "-" + Number(cardId.substr(12, 2));
        var date = new Date(sBirthday.replace(/-/g, "/"));
        if (sBirthday != (date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate())) {
          this.stats.idCard = false;
          this.mesg = "出生日期非法"
          this.modelMask()
          this.row.age = ''
          this.sexm = ''
          this.sex=""
          return false;
        }
        //验证校验码是否合法
        for (var i = 17; i >= 0; i--) {
          iSum += (Math.pow(2, i) % 11) * parseInt(cardId.charAt(17 - i), 11);
        }
        if (iSum % 11 != 1) {
          this.stats.idCard = false;
          this.mesg = "校验码非法"
          this.modelMask()
          this.row.age = ''
          this.sex=""
          this.sexm = ''
          return false;
        }
        this.stats.idCard = true;
        this.stats.sex = true;
        if(this.stats.idCard){
          this.sexm = cardId.substr(16, 1) % 2 ? "男" : "女";
          this.sex = this.sexm
        }








        //计算年龄
        this.row.age = ''
        var strBirthday = ''
        if (cardId.length == 18) {
          strBirthday = cardId.substr(6, 4) + "/" + cardId.substr(10, 2) + "/" + cardId.substr(12, 2);
//          sexno = idCode.substring(16, 17)
        }
        //时间字符串里，必须是“/”
        if (this.stats.idCard) {
          var birthDate = new Date(strBirthday);
          var nowDateTime = new Date();
          var age = nowDateTime.getFullYear() - birthDate.getFullYear();
          //再考虑月、天的因素;.getMonth()获取的是从0开始的，这里进行比较，不需要加1
          if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
            age--;
          }
          this.row.age = age
        }

        if(this.row.age>10  && this.row.age<60){
          this.stats.idCard = true;
        }else{
          this.stats.idCard = false;
          this.mesg = "年龄不符合"
          this.modelMask()
          return false;
        }


      },

      //性别校验
      blursex(){
        this.mesg = ''
//        console.log(this.sex);
        if (this.sex == '') {
          this.mesg = '请填写性别'
          this.modelMask()
          this.stats.sex = false
        } else if (this.sexm != this.sex) {
          this.stats.sex = true
//          this.stats.sexnot = true
          this.mesg = '与身份证校验的性别不一致'
          this.modelMask()
        } else if (this.sexm == this.sex){
          this.stats.sex = true
        }else{

        }
      },

      // 手机号验证 正确赋值Vphone = true
      mobile(){
        this.mesg == ''
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (this.phone == '') {
          this.mesg = "请输入手机号码"
          this.modelMask()
          this.stats.phone = false
        } else if (!reg.test(this.phone)) {
          this.mesg = "手机格式不正确"
          this.modelMask()
          this.stats.phone = false
        } else {
          this.mesg = ""
          this.stats.phone = true;
        }
      },

      //获取验证码前判断手机号正确对否，正确的话请求后台，倒计时开始 点击获取验证码
      GetVerification(){
        this.mobile()
        if (this.stats.phone && this.msg.showTime) {
          this.countDownTime();
          this.$axios.post(api.send_sms(), {mobile: this.phone}, {
            headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).then(
            res => {
              console.log(res);
            },
            err => {
              console.log(err);
            }
          )
        }
      },

      //倒计时时间
      countDownTime() {
        let that = this;
        let countDownTime = 59;
        if (that.msg.showTime) {
          that.msg.showTime = false;
          that.inver = setInterval(function () {
            that.msg.time = countDownTime--;
            that.msg.btntxt = "秒重新获取";
            if (countDownTime <= 0) {
              clearInterval(that.inver);
              that.msg.btntxt = " 重新获取 ";
              that.msg.time = ''
              that.msg.showTime = true;
            }
          }, 1000);
        }
      },

      //验证码不为空
      code(){
        if (this.verification != '') {
          this.stats.verification = true;
        }else{
          this.stats.verification = false
        }
      },

      //点击  投保按钮
      submit(){
        if (this.checkbox && this.stats.name && this.stats.idCard && this.stats.sex && this.stats.phone && this.stats.verification) {
          if (this.sexm != this.sex) {
            this.stats.sexnot = true;
          } else {
//            this.stats.sex = false
            this.stats.sexnot = false;
            this.info()
          }
//          if (this.stats.sex) {
//            this.stats.sexnot = true;
//          } else {
//            this.stats.sexnot = false;
//            this.info()
//          }
        } else if (!this.checkbox) {
          this.mesg = '选择协议'
          this.modelMask()
        } else {
          this.mesg = '请填写正确得信息'
          this.modelMask()
        }
      },

      //性别不一致时，确定继续
      determine(){
        this.stats.sexnot = false
        this.info()
      },

      //性别不一致时，取消
      cancel(){
        this.stats.sexnot = false
      },

      //信息提交
      info(){
        let S = '';
        if (this.sex == '男') {
          S = 1
        } else {
          S = 2
        }
        this.$axios.post(api.add_policy(), {
          mobile: this.phone,
          name: this.name,
          idcard: this.idCard,
          verify_code: this.verification,
          sex: S,
          sex_eglect: 1
        }).then(
          res => {
            if (res.data.code == 1) {
              this.$router.push({
                name: "order",
                query: {
                  order_id: res.data.data.order_id,
                  policy_order: res.data.data.policy_order
                }
              });
            } else if (res.data.code == 2) {
              this.mesg = res.data.desc;
              this.modelMask()

            }
          },
          err => {
            console.log(err);
          }
        )
      }

    },
    computed: {},
    components: {
//      notes
    }
  }
</script>
<style scoped lang="less">
  .mesg {
    position: fixed;
    width: auto;
    height: auto;
    padding: 10px 17px;
    overflow: hidden;
    bottom: 106px;
    left: 50%;
    border-radius: 3px;
    transform: translateX(-50%);
  }

  .mesg_con {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: #fff;
    z-index: 2;
  }

  .mesg_bg {
    background-color: #000;
    opacity: .6;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .content {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #f2f2f2;
  }

  .sub_content {
    width: 85%;
    margin: 0 auto;
  }

  .label {
    width: 100%;
  }

  .label .input {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    border: 1px solid #E3E3E3;
  }

  .label p {
    width: 100%;
    font-size: 15px;
    line-height: 40px;
  }

  .label input {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 40px;
    outline: none;
    text-indent: 11px;
    border: none;
  }

  .Verification {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    line-height: 40px;
    background-color: #0098ef;
    border-left: 1px solid #e3e3e3;
    padding: 0 10px;
    color: #fff;
    border-radius: 4px 0 0 4px;
  }

  .submit {
    border-top: 1px solid #e3e3e3;
    position: fixed;
    z-index: 10;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 52px;
    line-height: 52px;
    background-color: #fff;
    span {
      font-size: 22px;
      color: #ff7300;
      margin-left: 3%;
    }
    .submit_btn {
      float: right;
      background-color: #0098ef;
      height: 52px;
      line-height: 52px;
      padding: 0 25px;
      color: #fff;
    }
    .active {
      background-color: #ccc;
    }
  }

  .agreement {
    padding-left: 1px;
    input {
      position: relative;
      top: 1px;
      /*right: 2px;*/
      outline: none
    }
    margin-top: 16px;
    span {
      color: #2f9af5;
      margin: 0 3px;
    }
  }

  /*notes*/
  .notes, .sexnot {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }

  .notes_bg, .sexnot_bg {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4;
  }

  .notes_con, .sexnot_con {
    width: 96%;
    left: 2%;
    position: absolute;
    bottom: 8px;
    background-color: #f7f7f7;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 17px;
    h3 {
      line-height: 50px;
      text-align: center;
    }
    p {
      line-height: 25px;
      width: auto;
      padding: 0px 43px;
      padding-bottom: 25px;
      color: #7b7b7b;
    }
    .sexnot_center {
      text-align: center
    }
    .gotit {
      line-height: 60px;
      border-top: 1px solid #e1e1e1;
      font-size: 15px;
      text-align: center;
      font-weight: bold;
      background-color: #f2f2f2;
    }
    .sexbtn {
      display: flex;
      justify-content: space-between;
      line-height: 60px;
      border-top: 1px solid #e1e1e1;
      font-size: 15px;
      text-align: center;
      font-weight: bold;
      background-color: #f2f2f2;
      div {
        width: 50%;
      }
      .determine {
        border-left: 1px solid #e1e1e1;
        margin-left: -1px;
      }
    }
  }
</style>

